<template>
  <div class="search">
    <div class="search-top">
      <div class="search-input">
        <i
          class="iconfont icon-sousuo"
          @click.stop="
            searchHistory(value);
            searchShow = false;
          "
        ></i>
        <input
          type="text"
          placeholder="搜索歌曲、歌手、专辑"
          v-model="value"
          @keydown.enter="
            searchHistory(value);
            searchShow = false;
          "
        />
        <span
          class="iconfont icon-shanchu"
          v-if="value"
          @click.stop="(value = ''), (searchShow = true)"
        ></span>
      </div>
    </div>
    <SearchBottom
      :searchArr="searchArr"
      @remove="remove($event)"
      v-if="searchShow"
      @newValue="value = $event"
    ></SearchBottom>
    <SearchList
      v-else
      :searchListArr="searchListArr"
      @update:currentSong="$emit('update:currentSong', $event)"
      :currentSong="currentSong"
      :playing="playing"
    ></SearchList>
  </div>
</template>

<script>
import SearchBottom from "../components/SearchBottom.vue";
import SearchList from "../components/SearchList.vue";
export default {
  components: { SearchBottom, SearchList },
  props: {
    currentSong: [Object, null],
    playing: Boolean,
  },
  data() {
    return {
      value: "",
      searchArr: [],
      searchShow: true,
      searchListArr: [],
    };
  },
  created: function () {

    if (JSON.parse(localStorage.getItem(history))) {
      this.searchArr = JSON.parse(localStorage.getItem(history));
    }
  },
  methods: {
    searchHistory: function (val) {
      if (val) {
        this.searchArr.push(val);
        this.searchArr = this.searchArr.filter((ele, index, arr) => {
          return arr.indexOf(ele) === index;
        });
        localStorage.setItem(history, JSON.stringify(this.searchArr));

        // 搜索框接口
        this.axios
          .get("https://apis.netstart.cn/music/search?keywords=" + this.value)
          .then((res) => {
            console.log(res);
            // console.log(res.data.result.songs);
            this.searchListArr = res.data.result.songs;
          });
      }
    },
    remove: function (val) {
      var index = this.searchArr.indexOf(val);
      this.searchArr.splice(index, 1);
      localStorage.setItem(history, JSON.stringify(this.searchArr));
    },
  },
  watch: {
    value: function (newValue) {
      if (newValue == "") {
        this.searchShow = true;
      }
    },
  },
};
</script>

<style lang="less">
.search {
  .search-top {
    padding: 15px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .search-input {
      height: 30px;
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 15px;
      padding: 3px 5px;
      display: flex;
      align-items: center;
      color: #333;
      i {
        margin-right: 5px;
        font-size: 14px;
      }
      input {
        flex: 1;
        border: 0;
        outline: none;
        background-color: rgba(0, 0, 0, 0);
      }
      span {
        font-size: 20px;
        color: rgba(0, 0, 0, 0.2);
      }
    }
  }
}
</style>